<template>
  <div class="app-container">
    <el-card class="help-center-container">
      <el-tabs v-model="equType" @tab-click="handleClick">
        <el-tab-pane label="平台端" name="web">
          <help-table v-if="equType === 'web'" :platform="platform" :equ-type="equType" />
        </el-tab-pane>
        <el-tab-pane label="用户端" name="mini-app">
          <help-table v-if="equType === 'mini-app'" :platform="platform" :equ-type="equType" />
        </el-tab-pane>
        <el-tab-pane label="企业主" name="app">
          <help-table v-if="equType === 'app'" :platform="platform" :equ-type="equType" />
        </el-tab-pane>
      </el-tabs>
      <el-button type="primary" class="help-center-container-button" @click="goAddContent">
        新建内容
      </el-button>
    </el-card>
  </div>
</template>
<script>
import { mapMutations, mapState } from 'vuex'
import HelpTable from './table.vue'
export default {
  name: 'HelpCenter',
  components: {
    HelpTable
  },
  data() {
    return {
      formOption: {
        data: {},
        items: [
          {
            type: 'input',
            label: '设备名称',
            value: 'deviceName'
          }
        ]
      },
      // 所属端口 1=用户端 2=企业主端 10=平台端
      platform: 10
    }
  },
  computed: {
    ...mapState('base', ['tab_key']),
    equType: {
      get() {
        return this.tab_key ? this.tab_key : 'web'
      },
      set(val) {
        this.SET_TABS_TYPE({ value: val })
      }
    }
  },
  created() {
    this.initPlatform()
  },
  methods: {
    ...mapMutations('base', ['SET_TABS_TYPE']),
    initPlatform(name) {
      const key = {
        web: 10,
        'mini-app': 1,
        app: 2
      }
      this.platform = key[name ? name : this.equType]
    },
    handleClick({ name }) {
      this.initPlatform(name)
      this.SET_TABS_TYPE({ value: name })
    },
    goAddContent() {
      this.$router.push({
        path: '/setting/help_center/add_content',
        query: { type: 'add', platform: this.platform }
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.help-center-container {
  position: relative;
  &-button {
    position: absolute;
    top: 20px;
    right: 20px;
  }
}
</style>
